
<template>
    <div class="exempt-penalty-interest-table">
        <div class="contract-table">
            <Row>
                <Col span="24">
                    <Button
                        type="primary"
                        class="table-btn"
                        @click="changeInterest"
                        :disabled="!canChange"
                    >更改</Button>
                    <Button type="primary" class="table-btn" :disabled="!canSave">保存</Button>
                    <Button type="primary" class="table-btn" :disabled="!canSubmit">提交</Button>

                    <Button type="primary" class="table-btn">Excel导入</Button>
                </Col>
                <Col span="24">
                    <Table
                        width="100%"
                        :columns="contractTableHead"
                        :data="contractTable.records"
                        :loading="loading"
                    >
                        <template slot-scope="{ row, index }" slot="action">
                            <Button
                                type="text"
                                size="small"
                                @click="showContractDetial('write',row)"
                            >处理</Button>
                        </template>
                        <template slot-scope="{ row, index }" slot="applyNo">
                            <span @click="showContractDetial('read',row)">{{row.applyNo}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="contractStatus">
                            <span>{{getTitle('contractStatus',row.contractStatus)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="processStatus">
                            <span>{{getTitle('processStatus',row.processStatus)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="processMode">
                            <span>{{getTitle('processMode',row.processMode)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="SMS">
                            <span style="font-size:16px;">
                                <Icon type="ios-paper-plane" />
                            </span>
                        </template>
                    </Table>
                </Col>
                <Col span="24">
                    <Row type="flex" justify="end" class="table-page">
                        <Page
                            :current="contractTable.current"
                            :transfer="true"
                            :total="contractTable.total"
                            :page-size="contractTable.size"
                            @on-change="changePage"
                            @on-page-size-change="changePageSize"
                            :page-size-opts="pageSizeOpts"
                            size="small"
                            show-total
                            show-elevator
                            show-sizer
                        ></Page>
                    </Row>
                </Col>
            </Row>
        </div>
        <interestModal :modal="modal" :modalTitle="modalTitle" @closeModal="closeModal" />
    </div>
</template>
<script>
    import interestModal from "./modal";
    import {getTitleFromDataDict} from "_p/basic/assets/contract/js/utils";

    export default {
    name: "interestTable",
    props: {
        contractTable: {
            type: Object,
            required: true
        },
        processStatusDict: {
            type: Array,
            required: true
        },
        contractStatusDict: {
            type: Array,
            required: true
        },
        processModeDict: {
            type: Array,
            required: true
        }
    },
    components: { interestModal },
    data() {
        return {
            loading: false,
            // 日期区间
            isDateErr: false,

            contractTableHead: [
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    title: "费用类型",
                    key: "applyNo",
                    width: 100,
                    align: "center"
                },
                {
                    title: "客户姓名",
                    key: "custName",
                    width: 120
                },
                {
                    title: "申请单号",
                    key: "applyNo",
                    width: 100,
                    slot: "applyNo",
                    className: "applyNo"
                },
                {
                    title: "合同号",
                    key: "contractNo",
                    width: 150
                },
                {
                    title: "当期应还款日",
                    key: "contractStatus",
                    width: 120,
                    slot: "contractStatus"
                },

                {
                    title: "期数",
                    key: "contactNo",
                    width: 80
                },

                {
                    title: "逾期天数",
                    key: "processMode",
                    width: 100,
                    slot: "processMode"
                },
                {
                    title: "应还款金额",
                    key: "processStatus",
                    width: 100,
                    slot: "processStatus"
                },
                {
                    title: "罚息总计",
                    key: "amount",
                    width: 100
                },
                {
                    title: "核销额",
                    key: "SMS",
                    width: 60,
                    slot: "SMS"
                },
                {
                    title: "累计豁免额",
                    key: "SMS",
                    width: 60,
                    slot: "SMS"
                },

                {
                    title: "开始计算日期",
                    key: "createTime",
                    width: 100
                },

                {
                    title: "结束计算日期",
                    key: "endTime",
                    width: 100
                },

                {
                    title: "净逾期额",
                    key: "closeDate",
                    width: 120
                },
                {
                    title: "本次豁免金额",
                    key: "closeDate",
                    width: 120
                }
            ],

            pageSizeOpts: [10, 20, 50, 100],
            modal: false,
            modalTitle: "批量处理",
            canChange: false,
            canSave: false,
            canSubmit: false,
            file: null
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {},
        // 查询
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$emit("getList", this.formValidate);
                }
            });
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        },
        handleUpload(file) {
            this.file = file;
            return false;
        },

        // 分页 Fn
        changePageSize(num) {
            this.$emit(
                "getList",
                Object.assign({}, this.formValidate, { pageSize: num })
            );
            this.formValidate.pageSize = num;
        },
        changePage(num) {
            this.$emit(
                "getList",
                Object.assign({}, this.formValidate, { pageNumber: num })
            );
            this.formValidate.pageNumber = num;
        },
        changeInterest() {
            this.modal = true;
        },
        closeModal() {
            this.modal = false;
        },
        getTitle(type, val) {
            return getTitleFromDataDict(this[type + "Dict"], val);
        }
    },
    computed: {}
};
</script>
<style scoped>
.contract-close-btns {
    padding-bottom: 28px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}
.page {
    padding-top: 8px;
}
.w160 {
    width: 160px;
}
.table-btn {
    margin-right: 16px;
    margin-bottom: 16px;
}
.applyNo {
    cursor: pointer;
}
</style>
